<template>
  <div class="roles">
    <!-- 面包屑组件 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button type="primary" plain>添加角色</el-button>

    <el-table class="mt-15" :data="roleList" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
            <!-- 布局 -->
             <!-- 第一个循环加给最外层的el-row -->
          <el-row v-for="firtChildItem in scope.row.children" :key="firtChildItem.id">
              <!-- 总体分成两部分，一份小的占4份，大的占20份。4份中的内容放的是，第一个children中的每一项的authName -->
              <el-col :span="4">
                <el-tag closable @close="handleClose(scope.row, firtChildItem.id)">{{firtChildItem.authName}}</el-tag>
                <!-- 判断什么时候出现右箭头？ -->
                <i class="el-icon-arrow-right" v-if="firtChildItem.children.length > 0"></i>
              </el-col>
              <el-col :span="20">
                <!-- 继续对20份的这块内容进行划分，又分为4份 和 20份 -->
                 <!-- 第二个循环加给内层的el-row -->
                <el-row v-for="secondChildItem in firtChildItem.children" :key="secondChildItem.id">
                  <el-col :span="4">
                    <!-- <el-tag type="success">{{secondChildItem.authName}}</el-tag> -->
                     <el-tag type="success" closable @close="handleClose(scope.row, secondChildItem.id)">{{secondChildItem.authName}}</el-tag>
                    <i class="el-icon-arrow-right" v-if="secondChildItem.children.length > 0"></i>
                  </el-col>
                  <el-col :span="20">
                      <!-- 第三个循环直接加给tag组件就行了 -->
                   <el-tag type="danger" v-for="thirdChildItem in secondChildItem.children" :key="thirdChildItem.id" closable @close="handleClose(scope.row, thirdChildItem.id)">{{thirdChildItem.authName}}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" v-if="scope.row.children.length<=0">该角色没有分配权限，请前往分配！</el-col>
            </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="描述"></el-table-column>
      <el-table-column label="操作">
        <!-- 1.3 表格直接渲染数据不需要使用作用域插槽，如果在表格里面需要放标签或者其他组件的时候，就需要使用作用域插槽 -->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <!-- 4.4 通过scope对象的row属性，可以拿到点击的那一行的表格数据对象 -->
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
          <!-- 9.2 点击授权按钮 -->
           <!-- 10.1 绑定授权角色点击事件 @click="handleGrantRight" -->
           <!-- 10.5 点击的时候，需要将scope.row传入函数中，因为我们默认选中节点的id，需要从scope.row的数据中获取 -->
           <el-button type="warning" icon="el-icon-check" circle @click="handleGrantRight(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 10.2 授权角色对话框 -->
    <el-dialog title="授权角色" :visible.sync="grantDialogFormVisible">
      <!-- 10.3 添加树形控件 控制树形的高度之类的 -->
      <div class="tree-box">
          <!-- data defaultProps也要拷贝过来 -->
           <!--
          data属性表示树形控件的数据 存储我们数据的
          show-checkbox 显示前面的小框框
          node-key唯一标识树中的节点 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
          :default-expanded-keys="[2, 3]" 默认展开2 3 控制展开哪个节点下面的内容
          :default-checked-keys="[5]" 默认选中为5的
          default-expand-all默认展开全部节点
         -->
         <!-- 10.8 定义ref  ref="tree"-->
        <el-tree
          :data="rightList"
          ref="tree"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="selectedIds"
          :props="defaultProps">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="grantDialogFormVisible = false">取 消</el-button>
        <!-- 确定提交授权按钮 -->
        <el-button type="primary" @click="confirmGrant">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 已有获取角色列表接口 可共用
import { getRoles, deleteRoleRight, getRightList, grantRole } from '@/api'
export default {
  data () {
    return {
      // 从这里拿树形控件节点默认选中的数据
      roleList: [],
      // 控制显示与隐藏的 一开始为false
      grantDialogFormVisible: false,
      rightList: [],
      defaultProps: {
        // children 就是用来指定后台返回的数据中,到底哪个字段用来保存子节点的
        children: 'children',
        // label就是用来指定后台返回的数据中，到底是哪个字段用来展示汉字
        label: 'authName'
      },
      selectedIds: [], // 默认选中节点的id数组
      currentRole: {} // 10.11 当前选择的角色 暂存用户点击的角色，因为后面发送授权请求时 grantRole() 需要一个roleId  我们在一开始点击授权按钮的时候把它存起来
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    initTable () {
      getRoles()
        .then(res => {
          this.roleList = res.data
        })
    },
    // 删除角色权限
    handleClose (row, rid) {
      deleteRoleRight(row.id, rid)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message.success(res.meta.msg)
            // 这里删除成功以后不直接刷新页面，用户体验不好
            // this.initTable()
            // 直接将后台返回的删除之后的新的权限拿到，用它去替换来的权限就可以了
            row.children = res.data
          } else {
            this.$message.error(res.meta.msg)
          }
        })
    },
    // 10.1 点击授权按钮
    handleGrantRight (row) {
      // 点击的时候 为true 显示对话框
      this.grantDialogFormVisible = true

      // 10.11 暂存点击角色信息
      this.currentRole = row

      // 10.7 进行循环遍历前需要先对selectedIds数组清空 不然没反应
      this.selectedIds.length = 0
      // 10.6 对row中的children属性进行遍历，将第三层数据中的id取出来，放进selectedIds数组中
      // console.log(row)
      // handleGrantRight (row)里row  firstItem第一层
      row.children.forEach(firstItem => {
        // firstItem.children 判断必须有children属性 firstItem.children.length是判断length必须大于0
        if (firstItem.children && firstItem.children.length > 0) {
          firstItem.children.forEach(secondItem => {
            if (secondItem.children && secondItem.children.length > 0) {
              secondItem.children.forEach(thirdItem => {
                // 取到第三层children数据中的id，push进selectedIds数组中
                this.selectedIds.push(thirdItem.id)
              })
            }
          })
        }
      })
      // 10.4 获取权限树形数据
      this.getTreeData()
    },
    // 确定提交授权
    confirmGrant () {
      //  10.9 getCheckedKeys()方法获取全钩的节点 (下面的节点) childIds子节点
      let childIds = this.$refs.tree.getCheckedKeys()
      //  10.9 getHalfCheckedKeys()方法获取半钩的节点 （上面的节点） fatherIds父节点
      let fatherIds = this.$refs.tree.getHalfCheckedKeys()
      //  10.10把上面两个合并成一个id数组
      // 两种合并方法1.  ...方法 2.concat方法
      let ids = [...childIds, ...fatherIds]
      // let ids = childIds.concat(fatherIds)
      let idsStr = ids.join(',')
      // 10.11发请求
      grantRole(this.currentRole.id, idsStr)
        .then(res => {
          if (res.meta.status === 200) {
            // 隐藏框
            this.grantDialogFormVisible = false
            // 授权完刷新表格
            this.initTable()
            // 提示框
            this.$message.success(res.meta.msg)
          } else {
            this.$message.error(res.meta.msg)
          }
        })
    },
    // 10.4 获取权限树形数据
    getTreeData () {
      getRightList('tree')
        .then(res => {
          console.log(res)
          this.rightList = res.data
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tag {
    margin: 5px;
}
.tree-box {
  height: 300px;
  overflow: auto;
}
</style>
